<template>
  <view class="wrap">
    <uv-navbar fixed title="投诉活动组织者" autoBack safeAreaInsetTop placeholder :border='false'></uv-navbar>
    <!-- <view class="header" :style="{backgroundImage: `url(${hintFrom})`}">
      <status-bar></status-bar>
      <view class="back" @click="back">
        <view class="call">
          <uv-icon name="arrow-left" size='40rpx' color="#000" bold></uv-icon>
        </view>
      </view>
    </view> -->
    <view class="box">
      <!-- <view class="title pb50">反馈类型</view>
      <view class="list">
        <view class="item" v-for="(item,index) in radioList" :key="index" @click="opt.type = item.id">
          <view class="icon">
            <image src="../../static/radio-on.png" class="img" v-if="opt.type == item.id"></image>
            <image src="../../static/checkoff.png" class="img" v-else></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view> -->
      <view class="title pb50">反馈内容</view>
      <view class="list">
        <view class="input">
          <uv-textarea v-model="opt.content" placeholder="请输入内容" height="200rpx" border='surround' :customStyle="{borderRadius: '12rpx'}" :textStyle="{fontSize: '24rpx', color: '#333'}" placeholderStyle='font-size: 24rpx; color: rgba($color: #000, $alpha: .2)'></uv-textarea>
        </view>
      </view>
      <view class="title pb30">图片上传(上传聊天截图或与问题描述相关的图片）</view>
      <view class="upload" @click="chooseImage">
        <view class="nowImage" v-for="(item,index) in images" :key="index">
          <image :src="setUrl(item)" mode="aspectFill" class="img"></image>
        </view>
        <view class="nowImage" v-if="images.length < 6">
          <image src="../../static/upload.png" class="img"></image>
        </view>
      </view>
      <view class="title pb30">联系方式（必填）</view>
      <view class="testList">
        <view class="test">
          <uv-input v-model="opt.name" placeholder="请填写您的姓名" border="surround" fontSize='26rpx' color='#333' placeholderStyle='font-size: 26rpx;color: rgba($color: #000, $alpha: .46)' :customStyle="{borderRadius: '12rpx'}"></uv-input>
        </view>
        <view class="test">
          <uv-input v-model="opt.phone" placeholder="请填写您的电话和邮箱" border="surround" fontSize='26rpx' color='#333' placeholderStyle='font-size: 26rpx;color: rgba($color: #000, $alpha: .46)' :customStyle="{borderRadius: '12rpx'}"></uv-input>
        </view>
      </view>
      <view class="footer">
        <button class="btn" hover-class="none" @click="keyUp">提交反馈</button>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    
    <action ref="actionPhoto" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { toast, choose, setUrl } from '@/common';
import { post } from '@/api';
import { gotoAppPermissionSetting } from "@/common/permission.js"

const actionPhoto = ref(null);
let images = ref([]);
let opt = ref({
  type: 4,
  content: '',
  images: '',
  name: '',
  phone: ''
})

function keyUp(){
  const value = opt.value;
  if(!value.content) return toast('请输入反馈内容')
  if(!images.value.length) return toast('请上传图片');
  if(!value.name) return toast('请输入联系人');
  if(!value.phone) return toast('请输入联系方式');
  confirms()
}
function confirms(){
  const value = opt.value;
  let params = {
    type: value.type,
    content: value.content,
    images: images.value.toString(),
    name: value.name,
    phone: value.phone
  }
  post('api/feedback/userFeedback', params).then(res => {
    if(res.code == 1){
      toast('反馈成功');
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}

function chooseImage(){
  if(images.value.length >= 6) return toast('最多上传6张');
  
  actionPhoto.value.open();
}
function getImageUrl(url){
  images.value.push(url);
}
</script>

<style lang="scss" scoped>
  .box{
    padding: 0 50rpx;
    width: 100%;
    .footer{
      padding: 50rpx 0;
    }
    .testList{
      .test{
        padding-bottom: 30rpx;
        &:last-child{
          padding-bottom: 0;
        }
      }
    }
    .upload{
      width: 100%;
      font-size: 0;
      margin-bottom: 52rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .nowImage{
        width: 32%;
        height: 216rpx;
        font-size: 0;
        border-radius: 12rpx;
        overflow: hidden;
        margin-right: 2%;
        margin-bottom: 20rpx;
        &:nth-of-type(3n){
          margin-right: 0;
        }
      }
    }
    .list{
      .item{
        margin-bottom: 50rpx;
        display: flex;
        align-items: center;
        .icon{
          width: 22rpx;
          height: 22rpx;
          font-size: 0;
        }
        .name{
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          padding-left: 24rpx;
        }
      }
    }
    .title{
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      padding-top: 50rpx;
      &.pb30{
        padding-bottom: 30rpx;
      }
      &.pb50{
        padding-bottom: 50rpx;
      }
    }
  }
  .back{
    padding-top: 25rpx;
    padding-left: 32rpx;
    .call{
      display: inline-block;
    }
  }
  .header{
    width: 100%;
    height: 337rpx;
    background-size: contain;
    background-repeat: no-repeat;
  }
</style>